<template>
  <div class="me">
    <div class="photobanner">
      <span class="setting" ><a href="#/me/setup"><img class="setup" src="../assets/images/me-setup.png"></a></span>
      <div class="img">
        <a v-on:click="gotoAddress('/otherIndex?id='+userId)" >
          <img class="photo" :src="'http://api.piver.cn/image/users/'+userId+'.jpg?v='+Math.random()||'http://api.piver.cn/image/users/2.jpg'">
        </a>
        <!--:src="photoUrl" v=Math.random()-->
        <!--<form enctype="multipart/form-data" >-->
          <!--<input name="avatar" type="file" placeholder="请选择上传图片" id="photoImgUpload" style="margin-left:-7px; margin-top:5px;" />-->
        <!--</form>-->
      </div>
      <!--avatar firstname-->

      <div class="name">{{meIndex.firstname}}</div>
      <div class="total clearFix">
          <div class="fl left" @click="gotoAddress('/me/follow')">
              <p>{{follownum}}</p>
              <!--<p>3200PingFang-SC-Heavy</p>-->
              <span>关注</span>
          </div>
          <div class="fl" @click="gotoAddress('/me/fans')">
              <p>{{fansNum}}</p>
              <span>粉丝</span>
          </div>
      </div>
    </div>

    <div class="message-box">
        <div class="tt clear">
          <div class="l title">我的消息</div>
          <div class="r all">
            <router-link :to="'/me/mymessage'" >全部消息</router-link>
          </div>
        </div>
        <div class="message-con msg1">
            <router-link :to="'/me/mymessage'" >
                 <img class="msg" src="../assets/images/me-msg1.png">
            </router-link>
            <router-link :to="'/me/msgdiscuss'" >
                 <img class="msg" src="../assets/images/me-msg2.png">
            </router-link>
            <!--<router-link :to="'/me/msgpraise'" >-->
                 <!--<img class="msg" src="../assets/images/me-msg3.png">-->
            <!--</router-link>-->
            <router-link :to="'/me/msgfans'" >
                 <img class="msg" src="../assets/images/me-msg4.png">
            </router-link>
            <router-link :to="'/me/msgnews'" >
                 <img class="msg" src="../assets/images/me-msg5.png">
            </router-link>
        </div>
    </div>

    <div class="order-box">
      <div class="tt clear">
        <div class="l title">我的订单</div>
        <div class="r all">
          <router-link :to="'/me/allorder'" >全部订单</router-link>
        </div>
      </div>
      <div class="message-con">
          <router-link :to="'/me/awaitorder'" >
              <img class="order" src="../assets/images/me-order1.png">
          </router-link>
          <router-link :to="'/me/fahuoorder'" >
              <img class="order" src="../assets/images/me-order2.png">
          </router-link>
          <router-link :to="'/me/shouhuoorder'" >
              <img class="order" src="../assets/images/me-order3.png">
          </router-link>
          <router-link :to="'/me/pingjiaorder'" >
              <img class="order" src="../assets/images/me-order4.png">
          </router-link>

      </div>
    </div>

    <!-- 去掉 06-21
    <div class="other-tab">
      <router-link :to="'/message'" ><span class="tab">购物车</span></router-link>
      <router-link :to="'/message'" ><span class="tab">收藏</span></router-link>
      <router-link :to="'/message'" ><span class="tab">代金券</span></router-link>
      <router-link :to="'/message'" ><span class="tab">钱包</span></router-link>
      <router-link :to="'/message'" ><span class="tab">意见反馈</span></router-link>
      <router-link :to="'/message'" ><span class="tab">邀请好友</span></router-link>

    </div>
    -->

    <div class="message-box store">
        <div class="tt clear">
          <div class="div-jm" v-on:click="gotoAddress('/me/saleall')">
            <span class="jm">我的寄卖</span>
            <span class="fr all">></span>
          </div>
          <!--<div class="r all">-->
            <!--<router-link :to="'/message'" >></router-link>-->
          <!--</div>-->
        </div>
        <div class="message-con">
            <router-link :to="'/me/shopping'" >
                 <img class="msg" src="../assets/images/me-store1.png">
            </router-link>
            <router-link :to="'/me/collect'" >
                 <img class="msg" src="../assets/images/me-store2.png">
            </router-link>
            <!--<router-link :to="'/me/coupon'" >-->
                 <!--<img class="msg" src="../assets/images/me-store3.png">-->
            <!--</router-link>-->
            <router-link :to="'/me/purse?id='+meIndex.customer_id" >
                 <img class="msg" src="../assets/images/me-store4.png">
            </router-link>
            <router-link :to="'/me/store'" >
                 <img class="msg" src="../assets/images/me-store5.png">
            </router-link>
        </div>
    </div>

	  <foot-guide></foot-guide>
  </div>
</template>

<script>
import footGuide from '../components/footGuide'
import {Toast} from 'mint-ui'
export default {
  name: 'Me',
  data () {
    return {
      meIndex:{},
      fansNum:0,
      follownum:0,
      userId:sessionStorage.user && JSON.parse(sessionStorage.user).customer_id || '',
      token:sessionStorage.user && JSON.parse(sessionStorage.user).token || '',
//      photoUrl:'http://api.piver.cn/image/users/'+(sessionStorage.user && JSON.parse(sessionStorage.user).customer_id)+'.jpg'
    }
  },

  methods: {
    gotoAddress(path){
      this.$router.push(path)
    },
    initData:function(){
      var  ajaxData = {};
      ajaxData.token = sessionStorage.user && JSON.parse(sessionStorage.user).token;

      var _this=this;
      $.ajax({
        type:'post',
        url: RouteMap.peopleDetail,
        data:ajaxData,
        success:function(res){
          if(res.code == 200){

            _this.meIndex = res.data;


            console.log(res.data)
          }
          else{
            //Toast(res.msg)
          }
        }
      })
    },
    getFans:function(){
      var  ajaxData = {};
      ajaxData.token = sessionStorage.user && JSON.parse(sessionStorage.user).token;

      var _this=this;
      $.ajax({
        type:'post',
        url: RouteMap.meFans,
        data:ajaxData,
        success:function(res){
          if(res.code == 200){

            _this.fansNum = res.data.total.num;

          }
          else{
            //Toast(res.msg)
          }
        }
      })
    },
    getFollow:function(){
      var  ajaxData = {};
      ajaxData.token = sessionStorage.user && JSON.parse(sessionStorage.user).token;

      var _this=this;
      $.ajax({
        type:'post',
        url: RouteMap.mefollow,
        data:ajaxData,
        success:function(res){
          if(res.code == 200){

            _this.follownum = res.data.total.num;

//            console.log(res.data)
          }
          else{
            //Toast(res.msg)
          }
        }
      })
    }


  },
  mounted:function () {
    this.initData();
    this.getFans();
    this.getFollow();
//    $('#photoImgUpload').on('change',function(){
//
//      var _this = this;
//
//      var formData = new FormData($('form')[0]);
//      $.ajax({
//        url: RouteMap.photoupload+'&token='+(sessionStorage.user && JSON.parse(sessionStorage.user).token),
//        type: 'POST',
//        data: formData,
//        cache: false,
//        contentType: false,
//        processData: false
//        })
//        .done(function(res) {
//
//        if(res.code == 200){
//
//          Toast('头像上传成功')
//          _this.photoUrl = res.data.avatar;
//          $('.photo').attr('src',_this.photoUrl+'?v='+Math.random());
//        }
//        else{
//          //Toast(res.msg)
//          return;
//        }
//
//      }).fail(function(res) {
//        Toast('头像上传失败')
//      });
//    })

  },


  components: {
      footGuide
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.me{
padding-bottom:2.19rem;
}
.photobanner{ text-align: center; padding-top:1.5rem; padding-bottom: 1.2rem; position: relative; background: #fff;}
.img{padding-bottom:.8rem;}
.photo{ border-radius:50%; width: 3.84rem; height:3.84rem;}
.name{font-size:.683rem;color:#000;padding-bottom:.72rem; font-weight:bold;}
.total{ margin-left: 6.35rem;width:4rem;}
.total p{color:#717071; font-size:.9rem; font-family:PingFang-SC-Heavy; }
.total span{color:#717071; font-size:.427rem; font-weight:bold;}
.total .left{padding-right:1.36rem;}


.setting{ position: absolute; right: .64rem; top: 1.49rem;}
.setup{width:.756rem;height:.756rem;}

.message-box,.order-box,.other-tab{padding:0 .64rem .896rem; background: #fff;}
.tt{margin-bottom:.644rem;}
.title{margin-left:6.1rem; color:#b01f24;
border-top:.17rem solid #b01f24;
font-size:.62rem;padding-top:.214rem;
}
.all{padding-top:.42rem; color:#b01f24; font-size: .5rem;}
.all a{
  color: #717071;
}
.message-con{
display:flex;
justify-content:space-between;
align-items:center;
}
.msg1{
  justify-content:space-around;
}

.msg{width:2.77rem;height:2.688rem;}
.order{width:3.52rem;height:3.54rem;}

.tab{ display: inline-block;
      width: 18%;
      font-size:.6rem;
      text-align: center;
      padding: .133rem .267rem;
      margin: .1rem;
      background: red;
}
.div-jm{
  text-align: center;
  background: #f5f5f5;
  line-height: 1.5rem;
  height:1.5rem;
}
.jm{
  color:#b01f24;
  border-top:.17rem solid #b01f24;
  font-size:.62rem;
  margin-left: .5rem;
  padding-top: .214rem;

}
.div-jm .all{
  margin-top: 0;
  padding-top: 0;
  padding-right: .2rem;
}
</style>
